
<template>
  <div id="pubilcfooter">
    <main>
      <slot />
    </main>
    <footer>
      <div :class="[footerList[0].active ? 'active' : '']" @click="jump(footerList[0].path)">
        <span class="iconfont icon-shouye"></span>
        <span>首页</span>
      </div>
      <div :class="[footerList[1].active ? 'active' : '']" @click="jump(footerList[1].path)">
        <span class="iconfont icon-fenlei active"></span>
        <span>分类</span>
      </div>
      <div :class="[footerList[2].active? 'active' : '']" @click="jump(footerList[2].path)">
        <span class="iconfont icon-gouwuche"></span>
        <span>购物车</span>
      </div>
      <div :class="[footerList[3].active ? 'active' : '']" @click="jump(footerList[3].path)">
        <span class="iconfont icon-wode"></span>
        <span>我的</span>
      </div>
    </footer>
  </div>
</template>

<script>
export default {
  data() {
    return {
      footerList: [
        { active: false, path: "/home" },
        { active: false, path: "/types" },
        { active: false, path: "/cart" },
        { active: false, path: "/me" },
      ],
    };
  },

  watch: {
    "$route.path": {
      immediate: true,
      handler(_path) {
         this.footerList.map((it)=>{
             if(it.path==_path){
                 it.active=true
             }
             return it
         })
      },
    },
  },
  methods: {
    jump(e) {
        if(this.$route.path!=e){
            this.$router.push(e);
        }
    },
  },
};
</script>


<style lang="less" scoped>
@import "../style/iconfont/iconfont.css";

#pubilcfooter {
  display: block;
  height: 100%;
  > main {
    width: 100%;
    height: calc(100% - 50px);
    overflow-x: hidden;
  }
  > footer {
    border-top: 1px solid rgb(129, 126, 126);
    display: flex;
    > div {
      width: 25%;
      display: flex;
      flex-direction: column;
      span {
        margin: 0 auto;
      }
      span:nth-child(1) {
        font-size: 1.1rem;
      }
      span:nth-child(2) {
        font-size: 0.7rem;
      }
    }
    > .active {
      color: rgb(255, 153, 0);
    }
  }
}
</style>